<template>
  <div class="_wz_cent_main _wz_ElectronicWaybill">
    <Card dis-hover :bordered="true" style="margin:0 0 10px;">
      <p slot="title">搜索</p>
      <div slot="extra">
        <Button type="info" size="small" v-if="!searchType" @click="searchType = true" icon="ios-arrow-down">更多</Button>
        <Button type="info" size="small" v-else @click="searchType = false" icon="ios-arrow-up">收起</Button>
      </div>
      <Form :model="formDataSearch" label-position="right" :label-width="100" inline>
        <FormItem label="运单状态">
          <i-select v-model="formDataSearch.recordState" filterable placeholder="请选择运单状态" clearable>
            <Option :value="0">未分配车</Option>
            <Option :value="1">已分配车</Option>
            <Option :value="2">发车确认</Option>
            <Option :value="3">完成确认</Option>
          </i-select>
        </FormItem>
        <FormItem label="车辆车牌" >
          <i-input v-model="formDataSearch.vehiclePlateNo" placeholder="请填写车辆车牌" clearable />
        </FormItem>
        <FormItem label="从业人员" v-if="searchType">
          <i-input v-model="formDataSearch.driverName" placeholder="请填写从业人员" clearable />
        </FormItem>
        <FormItem label="运单编号" v-if="searchType">
          <i-input v-model="formDataSearch.recordNumber" placeholder="请填写运单编号" clearable />
        </FormItem>
        <FormItem label="挂车车牌" v-if="searchType">
          <i-input v-model="formDataSearch.trailerPlateNo" placeholder="请填写挂车车牌" clearable />
        </FormItem>
        <FormItem label="委托方" v-if="searchType">
          <i-input v-model="formDataSearch.shipperName" placeholder="请填写委托方" clearable />
        </FormItem>
        <FormItem label="确认方" v-if="searchType">
          <i-input v-model="formDataSearch.receivingName" placeholder="请填写确认方" clearable />
        </FormItem>
        <FormItem label="运输企业" v-if="searchType">
          <i-select v-model="formDataSearch.deptUuid" filterable placeholder="请选择运输企业" clearable>
            <Option v-for="item in subDeptList" :value="item.uuid" :key="item.uuid">{{ item.deptName }}</Option>
          </i-select>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="searchSubmit">搜索</Button>
        </FormItem>
      </Form>
    </Card>
    <Card dis-hover :bordered="true">
      <p slot="title">列表</p>
      <p slot="extra">
        <Button type="primary" @click="addTableData">添加</Button>
      </p>
      <wzTbale ref="wzTbale" :tableData="tableData"></wzTbale>
    </Card>
    <Drawer v-model="basicType" :title="formTitle" :mask-closable="false" :draggable="true" width="1000" :styles="formOperationStyles">
      <ElectronicWaybillEdit v-if="basicType" @closeFun="closeFun" :selectData="selectData"></ElectronicWaybillEdit>
    </Drawer>

    <Drawer v-model="seeDataType" title="详情" :mask-closable="false" :draggable="true" width="1000">
      <ElectronicWaybillDetail v-if="seeDataType" :selectData="selectData"></ElectronicWaybillDetail>
    </Drawer>


    <Drawer width="1100" :mask-closable="false" :draggable="true" title="查看轨迹" v-model="ElectronicPositioningType">
      <ElectronicPositioning v-if="ElectronicPositioningType" :ElectronicPositioningData="ElectronicPositioningData"></ElectronicPositioning>
    </Drawer>


    <Spin size="large" fix v-if="spinShow"></Spin>


  </div>
</template>

<script>
  import ElectronicWaybillEdit from "./ElectronicWaybillEdit";
  import ElectronicWaybillDetail from "./ElectronicWaybillDetail";
  import wzTbale from "../../../components/table/table";
  import ElectronicPositioning from "./ElectronicPositioning";

  export default {
    components: {
      ElectronicWaybillDetail,//详情
      ElectronicWaybillEdit,//添加
      wzTbale,//列表
      ElectronicPositioning,//轨迹
    },
    data() {
      return {
        ElectronicPositioningType:false,//查看轨迹
        ElectronicPositioningData:{},//
        spinShow:false,//本页加载
        searchType:false,//搜索条件
        subDeptList: [],//运输企业
        seeDataType: false,
        basicType: false,
        formTitle: '',
        selectData: {},
        formDataSearch: {},//搜索表单数据
        formOperationStyles: {//表单左侧移出css
          height: 'calc(100% - 55px)',
          overflow: 'auto',
          paddingBottom: '53px',
          position: 'static'
        },
        tableData: {
          url: this.apiUrl.billRecordBillRecordPageList,//请求地址
          method: 'post',//请求方式
          where: {},//搜索条件
          height: 'auto',//表格高度 auto
          page: true,//分页是否使用
          columns: [//表头数据
            {type: 'index', width: 70, align: 'center', title: '序号'},
            {title: '运单编号', key: 'recordNumber', minWidth: 180},
            {title: '运单状态', minWidth: 140, render: (h, params) => {
                //  0：未分配，1：已分配，2：发车确认，3：完成确认
                var test = '';
                if (params.row.recordState == 0) {
                  test = h('Tag', {props: {type: 'dot',color: 'warning'}}, '未分配')
                } else if (params.row.recordState == 1){
                  test = h('Tag', {props: {type: 'dot',color: 'primary'}}, '已分配')
                } else if (params.row.recordState == 2){
                  test = h('Tag', {props: {type: 'dot',color: 'primary'}}, '发车确认')
                } else if (params.row.recordState == 3){
                  test = h('Tag', {props: {type: 'dot',color: 'success'}}, '完成确认')
                }
                return test;
              }
            },
            {title: '运输车辆', key: 'vehiclePlateNo', minWidth: 110},
            {title: '从业人员', key: 'driverName', minWidth: 110},
            {title: '委托方', key: 'customerShipperName', minWidth: 160},
            {title: '确认方', key: 'customerReceivingName', minWidth: 160},
            {title: '起运地', key: 'placeStartPlace', minWidth: 160},
            {title: '目的地', key: 'placeEndPlace', minWidth: 160},
            {
              title: '起止日期', key: 'startDate', minWidth: 300, render: (h, params) => {
                return h('span', (!!params.row.startDate?params.row.startDate:'--') + '  至  ' +(!!params.row.endDate?params.row.endDate:'--'));
              }
            },
            {title: '承运方', key: 'deptName', minWidth: 260},
            {
              title: '操作', fixed: 'right', width: 120,
              render: (h, params) => {

                let operationButtons = [];

                operationButtons.push(h('span', {
                  style: {"color": "#2d8cf0", "cursor": "pointer"},
                  on: {
                    click: () => {
                      this.selectData = params.row;
                      this.seeDataType = true;
                    }
                  }
                }, '查看'))

                //0：未分配，1：已分配，2：发车确认，3：完成确认
                var buttonList = [];
                if( params.row.recordState == 1){
                  //发车确认
                  buttonList.push(h('DropdownItem', {
                    nativeOn: {
                      click: () => {
                        var that = this;
                        that.$Modal.confirm({
                          title: '车辆确认',
                          content: '本次电子运单确认发车？',
                          onOk: () => {
                            that.axios.post(that.apiUrl.billRecordBillRecordShipment, {uuid: params.row.uuid}).then(res => {
                              if (res) {
                                that.$Message.success('操作成功')
                                that.$refs.wzTbale.tableLoadData();
                              }
                            }).catch(err => {
                              console.log("失败", err)
                            })
                          }
                        })
                      }
                    }
                  }, '发车'))
                }
                if( params.row.recordState == 2){
                  //完成确认
                  buttonList.push(h('DropdownItem', {
                    nativeOn: {
                      click: () => {
                        var that = this;
                        that.$Modal.confirm({
                          title: '完成确认',
                          content: '本次电子运单确认完成？',
                          onOk: () => {
                            that.axios.post(that.apiUrl.billRecordBillRecordComplete, {uuid: params.row.uuid}).then(res => {
                              if (res) {
                                that.$Message.success('操作成功')
                                that.$refs.wzTbale.tableLoadData();
                              }
                            }).catch(err => {
                              console.log("失败", err)
                            })
                          }
                        })

                      }
                    }
                  }, '完成'))
                }
                if( params.row.recordState == 3){
                  //轨迹
                  buttonList.push(h('DropdownItem', {
                    nativeOn: {
                      click: () => {
                        var that = this;
                        var data = {
                          vehiclePlateNo:params.row.vehiclePlateNo,
                          beginDate: params.row.startDate,//开始时间
                          endDate: params.row.endDate,//开始时间
                        }

                        that.ElectronicPositioningData = data;
                        that.ElectronicPositioningType = true;
                      }
                    }
                  }, '轨迹'))
                }

                //修改
                if (params.row.recordState != 3) {
                  buttonList.push(h('DropdownItem', {
                    nativeOn: {
                      click: () => {
                        this.selectData = JSON.parse(JSON.stringify(params.row));
                        this.formTitle = '修改';
                        this.basicType = true;
                      }
                    }
                  }, '修改'))
                }


                //删除
                buttonList.push(h('DropdownItem', {
                  nativeOn: {
                    click: () => {
                      var that = this;
                      that.$Modal.confirm({
                        title: '删除提醒',
                        content: '确定要删除该条记录吗？',
                        onOk: () => {
                          that.axios.post(that.apiUrl.billRecordBillRecordDelete, {uuid: params.row.uuid}).then(res => {
                            if (res) {
                              that.$Message.success('删除成功')
                              that.$refs.wzTbale.tableLoadData();
                            }
                          }).catch(err => {
                            console.log("失败", err)
                          })
                        }
                      })
                    }
                  }
                }, '删除'))

                if (buttonList.length > 0) {
                  operationButtons.push(h('Divider', {props: {type: 'vertical',}}, ''))
                  operationButtons.push(h('Dropdown', {props: {trigger: "hover", transfer: true}},
                    [
                      h('span', {style: {"color": "#2d8cf0", "cursor": "pointer"}}, '更多▼'),
                      h('DropdownMenu', {slot: "list"}, buttonList)
                    ])
                  )
                }
                return operationButtons;
              }
            },
          ],
          format: {//返回数据格式
            list: ['data'],//数据list
            count: ['count'],//数据总量
          },
        },

      }
    },
    mounted() {//mounted 挂载结束状态
      var that = this;


      //运输企业
      that.axios.post(that.apiUrl.coreDeptCoreDeptList, {}).then(res => {
        if (!!res) {
          that.subDeptList = res.data.data;
        }
      }).catch(err => {
        console.log("失败", err)
      })

    },
    methods: {//执行的方法
      searchSubmit() {//搜索
        this.tableData.where = JSON.parse(JSON.stringify(this.formDataSearch));
        this.$refs.wzTbale.tableLoadData(true);
      },
      //添加
      addTableData() {
        this.selectData = {};
        this.formTitle = '添加';
        this.basicType = true;
      },
      //父级关闭
      closeFun(data) {
        var that = this;
        if (data) {//添加修改 刷新表单
          that.$refs.wzTbale.tableLoadData();
        }
        that.basicType = false;
      },
    },
    watch: {//监听

    },
    props: {//接收来自父组件的数据

    },
    beforeUpdate() {//beforeUpdate 更新前状态

    },
    updated() {//updated 更新完成状态

    },
    beforeDestroy() {//beforeDestroy 销毁前状态

    },
    destroyed() {//destroyed 销毁完成状态

    }
  }
</script>

<style lang="less">
  ._wz_ElectronicWaybill {
    display: flex;
    flex-direction: column;
  }
</style>
